<template>
    <div class="page">
        <div class="FontSize_text box">
            <span>退出成功{{ num }}秒后返回主页</span>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
const num = ref(5)
const timer = ref(null)
onMounted(() => {
    timer.value = setInterval(() => {
        nextTick(() => {
            num.value--
            if (num.value <= 0) {
                timer.value ? clearInterval(timer.value) : ""
                router.push({ name: "home" })
            }
        })
    }, 1000)
})
onBeforeUnmount(() => {
    timer.value ? clearInterval(timer.value) : ""
})
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>